
<!--
 * @Description: 
 * @Author: 赵华宇
 * @Date: 2024-11-13 17:38:15
 * @LastEditors: 赵华宇
 * @LastEditTime: 2024-11-14 09:37:58
-->
<template>
  <!-- <div class="body"> -->

  <!-- <div class="body"> -->
  <div id="app">
  <div class="divLeft">
      <p>新用户注册</p>
      <p>USER REGISTER</p>
    </div>
    <div class="divRight">
      <!-- <buttton  @click="login">登录</buttton> -->
      <p v-if="showLogin" @click="toggleForm"> 已有账号？<a href="">登录</a></p>
      <!-- <button ref="showLogin">立即登录</button> -->
      </div>
    <div class="divCenter">
      <div class="divFrom">
         <!-- 表单元素 -->
         <form action="#" method="post">
          <table>
            <tr>
              <td class="tdLeft">
                <label class="" for="username">
                  用户名
                </label>
              </td>
              <td class="tdRight">
                <input v-model="username" type="text" placeholder="请输入用户名">
              </td>
            </tr>
            <tr>
              <td class="tdLeft">
                <label class="" for="password">
                  密码
                </label>
              </td>
              <td class="tdRight">
                <input v-model="password" type="text" placeholder="请输入密码" >
              </td>
            </tr>
            <tr>
                <td class="tdLeft">
                  <label class="" for="email">
                    Email
                  </label>
                </td>
                <td class="tdRight">
                  <input v-model="email" type="text" placeholder="请输入Email" >
                  <!-- <input type="text" name="email" id="email" placeholder="请输入Email"> -->
                </td>
              </tr>
              <tr>
                <td class="tdLeft">
                  <label class="" for="name">
                    姓名
                  </label>
                </td>
                <td class="tdRight">
                  <input v-model="name" type="text" placeholder="请输入真实姓名">
                  <!-- <input type="text" name="name" id="name" placeholder="请输入真实姓名"> -->
                </td>
              </tr>
              <tr>
                <td class="tdLeft">
                  <label class="" for="phone">
                    手机号
                  </label>
                </td>
                <td class="tdRight">
                  <input v-model="phone" type="text" placeholder="请输入您的手机号" >
                  <!-- <input type="text" name="phone" id="phone" placeholder="请输入您的手机号"> -->
                </td>
              </tr>
            <tr>
              <td class="tdLeft">
                <label class="" for="gender">
                  性别
                </label>
              </td>
              <td class="tdRight">
                <input type="radio" v-model="gender" value="男" > 男
                <input type="radio" v-model="gender" value="女" > 女
              </td>
            </tr>
            <tr>
                <td class="tdLeft">
                  <label class="" for="birth">
                    出生日期
                  </label>
                </td>
                <td class="tdRight">
                  <input type="date" v-model="birth" id="birth">
                </td>
              </tr>

            <tr>
              <td class="tdLeft">
                <label class="" for="checkCode">
                  验证码
                </label>
              </td>
              <td class="tdRight">
                <input type="text" v-model="checkCode" id="checkCode" placeholder="请输入验证码" @keyup.enter="register">
                <img id="imgCode" src="@/img/验证码.png" alt="">
              </td>
            </tr>
            <tr>
              <td id="tdSubmit" colspan="2"><input @click="register" id="btnSubmit" type="submit" value="注册"></td>
              <!-- <td></td> -->
            </tr>
          </table>
        </form>
      </div>
    </div>
    </div>
    <!-- </div>
    </div> -->
</template>
  <script setup>
  import{ref}from 'vue'
  const username=ref("");
  const password=ref("");
  const email=ref("");
  const name=ref("");
  const phone=ref("");
  const gender=ref("");
  const birth=ref("");
  const checkCode=ref("");
  const showLogin=ref(false);
  function register(){
    if(username.value==""){
      alert("请输入用户名");
    }if(password.value==""){
      alert("请输入密码");
    }if(email.value==""){
      alert("请输入邮箱");
    }if(name.value==""){
      alert("请输入姓名");
    }if(phone.value==""){
      alert("请输入手机号");
    }
    if(gender.value==""){
      alert("请选择性别");
    }if(birth.value==""){
      alert("请选择出生日期");
    }if(checkCode.value==""){
      alert("请输入验证码");
    }else{
      alert("注册成功");
    }
  }
  </script>

<style scoped>
#app{
  /* border: 1px solid red; */
  width: 900px;
  height: 500px;
  /* border: 8px solid #eee; */
  border: 8px solid rgb(220, 219, 217);
  /* 让div水平居中 */
  margin: auto;
  background-color: white;
}
.divLeft{
    float: left;
    width: 25%;
    padding-top: 15px;
    padding-left: 15px;
    }
.divLeft>p:first-child{
    color: #ffd026;
    font-size: 20px;
}
.divLeft>p:last-child{
    color: #a6a6a6;
    font-size: 20px;
    /* font-weight: bold; */
}
.divCenter{
    padding-top: 30px;
    float: left;
    /* 这里减去的值是左右宽度 */
    width: calc(100% - 25% - 25%);
}
table{
   color: #a6a6a6;
}
.tdLeft{
      width: 120px;
      height: 45px;
      text-align: right;
      padding-right: 45px;
}
 /* 单独设置验证码图片的样式 */
 #imgCode{
    height: 32px;
    /* 垂直居中 */
    vertical-align: middle;
}
/* 表单中放置提交按钮的td */
#tdSubmit{
    text-align: center;
}
#btnSubmit{
    width: 115px;
    height: 30px;
    background-color: #ffd026;
    border: 0px ;
    color: #a6a6a6;
    border-radius: 5px;
}
#username,#password,#checkCode,#email,#name,#phone,#birth{
    width: 251px;
    height: 32px;
    border: 1px solid #a6a6a6;
    border-radius: 5px;
    padding-left: 10px;
}
#checkCode{
    width: 110px;
}
.divRight{
    float: right;
    width: 25%;
    padding-top: 15px;
    padding-right: 15px;
}
.divRight>p{
    font-size: 15px;
    color: #a6a6a6;
    text-align: right;
}
.divRight p a{
    color: pink;
}
</style>
